<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bookshop</title>

    <!-- Bootstrap -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/css/animate.min.css" rel="stylesheet">
    <link href="/assets/css/main.min.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico">

    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic'
          rel='stylesheet' type='text/css'>
</head>
<header class="header">

    <nav class="navbar navbar-bookshop navbar-static-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-md-5 hidden-xs hidden-sm">
                    <ul class="nav navbar-nav">
                        <li><a href="/user/info">我的领书</a></li>

                    </ul><!-- /.nav -->
                </div><!-- /.col -->
                <div class="col-md-3 col-xs-10 col-sm-10 navbar-left">

                    <p class="text-center">
                        <a href="#">
                            <span class="icon glyphicon glyphicon-earphone"></span> + 18888888888
                        </a>
                    </p>

                </div><!-- /.col -->
                <div class="col-md-4 col-sm-2">
                    <ul class="nav navbar-nav navbar-right">

                        <c:if test="${sessionScope.current_user eq null}" >
                            <li class="icon icon-small hidden-xs">
                                <a data-toggle="modal" data-target="#modal-login-big" href="#">登录</a>
                            </li>
                        </c:if >
                        <c:if test="${sessionScope.current_user != null}">
                            <li class="hidden-xs hidden-sm"><a href="/user/info">欢迎：${sessionScope.current_user.name}</a></li>
                        </c:if>
                    </ul><!-- /.nav -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </nav><!-- /.navbar -->


    <!-- Modal -->
    <div id="modal-login-big" class="modal login fade hidden-xs" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="text-center">
                        <ul class="login-list clearfix ">
                            <li class="active">登录</li>
                        </ul><!-- /.login-list -->
                        <form role="form" onsubmit="return false" id="loginForm" style="display: block;" class="inner-top-50">
                            <div class="form-group">
                                <input style="width:83%;" type="text" class="form-control bookshop-form-control"
                                       id="exampleInputEmail1" name="stuNum" placeholder="请输入您的学号">
                            </div>
                            <div class="form-group">
                                <input style="width:83%;" type="password" name="password" placeholder="请输入您的密码"
                                       class="form-control bookshop-form-control"
                                       id="exampleInputPassword1">
                            </div>
                            <button type="button" onclick="login()" class="btn btn-primary btn-uppercase">登录</button>
                            <%--<a href="#" class="forgot-password">忘记密码</a>--%>
                        </form>
                    </div>
                </div><!-- /.modal-body -->
                <div class="modal-footer">
                    <div class="text-center">
                        <ul class="social-list text-center">
                            <li><a href="#" class="facebook"></a></li>
                            <li><a href="#" class="google-plus"></a></li>
                            <li><a href="#" class="twitter"></a></li>
                            <li><a href="#" class="pinterest"></a></li>
                        </ul><!-- /.social-list -->
                    </div>
                </div><!-- /.modal-footer -->
                <a href="#" data-dismiss="modal" class="remove-icon"><i class="fa fa-times"></i></a>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <div class="main-header">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 top-search-holder m-t-10">
                    <!-- ============================================== SEARCH BAR ============================================== -->
                    <form class="search-form" action="/search/book" role="search">
                        <div class="form-group">
                            <label class="sr-only" for="page-search">在此输入您的搜索</label>
                            <input id="page-search" name="key" class="search-input form-control" type="search"
                                   placeholder="检索图书">
                        </div>
                        <button class="page-search-button">
		                    <span class="fa fa-search">
			                    <span class="sr-only">搜索</span>
		                    </span>
                        </button>
                    </form>
                    <!-- ============================================== SEARCH BAR : END ============================================== -->
                </div><!-- /.top-search-holder -->

                <div class="col-xs-12 col-sm-4 col-md-4 text-center logo-holder">
                    <!-- ============================================== LOGO ============================================== -->
                    <a href="/page/index">
                        <h1 class="logo">新教材管理系统</h1>
                    </a>
                    <!-- ============================================== LOGO : END ============================================== -->
                </div><!-- /.logo-holder -->

                <div class="col-xs-12  col-md-2 header-shippment hidden-sm m-t-10">
                    <!-- ============================================== FREE DELIVERY ============================================== -->
                    <div class="media free-delivery hidden-xs ">
                                <span class="media-left"><img src="/assets/images/delivery-icon.png" height="48"
                                                              width="48" alt=""></span>
                        <div class="media-body">
                            <h5 class="media-heading">预定提取</h5>
                        </div>
                    </div>
                    <!-- ============================================== FREE DELIVERY : END ============================================== -->
                </div><!-- /.header-shippment -->

                <div class="col-xs-12 col-sm-4 col-md-2 animate-dropdown1 top-cart-row m-t-10">
                    <!-- ============================================== SHOPPING CART DROPDOWN ============================================== -->
                    <ul class="clearfix shopping-cart-block list-unstyled">
                        <li class="dropdown">
                            <a class="menu-toggle-right clearfix" href="/.menu-toggle-right">

                                <span class="pull-right cart-left-block">
                                    <span class="cart-block-heading">我的借阅</span>
                                </span><!-- /.cart-left-block -->
                            </a>
                        </li>
                    </ul> <!-- /.list-unstyled -->
                    <!-- ============================================== SHOPPING CART DROPDOWN : END ============================================== -->
                </div><!-- /.top-cart-row -->
            </div><!-- /.row -->

        </div><!-- /.container -->

    </div><!-- /.main-header -->


    <!-- ============================================== NAVBAR ============================================== -->
    <div class="header-nav animate-dropdown">
        <div class="container">
            <div class="nav-bg-class">
                <!-- ============================================================= NAVBAR PRIMARY ============================================================= -->
                <nav class="yamm navbar navbar-primary animate-dropdown" role="navigation">

                    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
                        <ul class="nav navbar-nav">

                            <c:forEach items="${categoryList}" var="category">
                                <li class="active">
                                    <a href="/book/getList?categoryId=${category.id}">${category.categoryName}</a>
                                </li>
                            </c:forEach>


                        </ul><!-- /.nav -->
                    </div><!-- /.collapse navbar-collapse -->
                </nav><!-- /.yamm -->
                <!-- ============================================================= NAVBAR PRIMARY : END ============================================================= -->
            </div><!-- /.nav-bg-class -->
        </div><!-- /.container -->

    </div><!-- /.header-nav -->
    <!-- ============================================== NAVBAR : END ============================================== -->
</header>
</html>
<script type="text/javascript">
    function login() {
        $.ajax({
            url:'/user/login',
            type:'POST',
            dateType:'JSON',
            data:$("#loginForm").serialize(),
            success:function (result) {
                if (result.code == 200) {
                    window.location.reload();
                } else {
                    alert(result.msg);
                    return;
                }

            }
        })
    }
</script>
